<template>
  <div class="wallet-dashboard">
    <div class="dashboard-container">

      <!-- 主要内容区域 -->
      <div class="dashboard-content">
        <!-- 第一行：价格显示 -->
        <div class="content-row">
          <PriceDisplay />
        </div>

        <!-- 第二行：投资统计 -->
        <div class="content-row">
          <InvestmentStats />
        </div>

        <!-- 第三行：价格图表 -->
        <div class="content-row">
          <PriceChart />
        </div>

      </div>
    </div>

    <!-- 设置对话框 -->
    <el-dialog
      v-model="showSettingsDialog"
      :title="$t('dashboard.settingsTitle')"
      width="500"
      align-center
    >
      <div class="settings-content">
        <div class="setting-item">
          <span class="setting-label">{{ $t('dashboard.autoRefresh') }}</span>
          <el-switch v-model="autoRefresh" />
        </div>
        <div class="setting-item">
          <span class="setting-label">{{ $t('dashboard.notifications') }}</span>
          <el-switch v-model="notifications" />
        </div>
        <div class="setting-item">
          <span class="setting-label">{{ $t('dashboard.priceAlertThreshold') }}</span>
          <el-input-number 
            v-model="priceAlertThreshold" 
            :min="1" 
            :max="10" 
            :step="0.5"
            :precision="1"
          />
          <span class="setting-unit">%</span>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showSettingsDialog = false">{{ $t('dashboard.cancel') }}</el-button>
          <el-button type="primary" @click="saveSettings">{{ $t('dashboard.saveSettings') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'

const { t: $t } = useI18n()
import PriceDisplay from './PriceDisplay.vue'
import InvestmentStats from './InvestmentStats.vue'
import PriceChart from './PriceChart.vue'

const showSettingsDialog = ref(false)
const autoRefresh = ref(true)
const notifications = ref(true)
const priceAlertThreshold = ref(5.0)

let refreshInterval: number | null = null

const startAutoRefresh = () => {
  if (!autoRefresh.value) return
  
  // 每5分钟自动刷新一次
  refreshInterval = window.setInterval(() => {
    // 这里可以触发所有组件的数据刷新
    console.log('데이터 자동 새로고침...')
  }, 5 * 60 * 1000)
}

const stopAutoRefresh = () => {
  if (refreshInterval) {
    clearInterval(refreshInterval)
    refreshInterval = null
  }
}

const saveSettings = () => {
  // 保存设置到本地存储
  const settings = {
    autoRefresh: autoRefresh.value,
    notifications: notifications.value,
    priceAlertThreshold: priceAlertThreshold.value
  }
  
  localStorage.setItem('wallet_dashboard_settings', JSON.stringify(settings))
  
  ElMessage.success($t('dashboard.settingsSaved'))
  showSettingsDialog.value = false
  
  // 重新启动自动刷新
  stopAutoRefresh()
  startAutoRefresh()
}

const loadSettings = () => {
  try {
    const savedSettings = localStorage.getItem('wallet_dashboard_settings')
    if (savedSettings) {
      const settings = JSON.parse(savedSettings)
      autoRefresh.value = settings.autoRefresh ?? true
      notifications.value = settings.notifications ?? true
      priceAlertThreshold.value = settings.priceAlertThreshold ?? 5.0
    }
  } catch (error) {
    console.error('설정 로드 실패:', error)
  }
}

onMounted(() => {
  loadSettings()
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped lang="scss">
.wallet-dashboard {
  min-height: calc(100vh - 64px);
  background: #f8fafc;
  
  .dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
  }


  .dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .content-row {
      width: 100%;

    }
  }

  .settings-content {
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f1f5f9;

      &:last-child {
        border-bottom: none;
      }

      .setting-label {
        font-size: 14px;
        color: #374151;
        font-weight: 500;
      }

      .setting-unit {
        margin-left: 8px;
        font-size: 12px;
        color: #64748b;
      }

      :deep(.el-input-number) {
        width: 120px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}




@media (max-width: 1024px) {
  .wallet-dashboard {
    .dashboard-container {
      padding: 20px;
    }
  }
}

@media (max-width: 768px) {
  .wallet-dashboard {
    min-height: auto;

    .dashboard-container {
      padding: 16px;
    }

    .dashboard-content {
      gap: 18px;
    }
  }
}

@media (max-width: 520px) {
  .wallet-dashboard {
    .dashboard-container {
      padding: 12px;
    }

    .dashboard-content {
      gap: 16px;
    }
  }
}
</style>
